<template id="box">
  <div class="productClassify">
    <div class="box">
      <div class="box1">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="属性名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>

         
          
           <el-form-item label="商品类型"   >
              <el-select  v-model="value" placeholder="请选择" @change="cha(value)"  >
              <el-option 
                v-for="item in ruleForm.options"
                :label="item.name" 
                :key="item.id"            
                :value="item.id"
               >  
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="分类赛选样式" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="普通"></el-radio>
              <el-radio label="颜色"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="能否进行检索" prop="resource">
            <el-radio-group v-model="ruleForm.resourcee">
              <el-radio label="不需要检索"></el-radio>
              <el-radio label="关键字检索"></el-radio>
              <el-radio label="范围检索"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="商品属性关联" prop="resourcee">
            <el-radio-group v-model="ruleForm.resourceee">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="商品是否可选" prop="resourceeee" >
            <el-radio-group v-model="ruleForm.resourceeee" @change="xuan(value)">
              <el-radio  label="0">唯一</el-radio>
              <el-radio  label="1">单一</el-radio>
              <el-radio   label="2">复选</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="属性值的录入方式" prop="resourceeeee">
            <el-radio-group v-model="ruleForm.resourceeeee"  @change="lu(value)" >
          <el-radio label="1">手工录入</el-radio>
              <el-radio label="0">从下面列表中选择</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="属性值可选列表" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>

          <el-form-item label="是否支持手动新增" prop="resources">
            <el-radio-group v-model="ruleForm.resources">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="排序属性" prop="resourc">
            <el-input v-model="ruleForm.resourc"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    let that = this
    this.value = this.$route.params.shangpin;
    
    // this.ruleForm.resourc = this.$route.params.sort;
    // this.ruleForm.desc = this.$route.params.inputList;
    this.type=this.$route.params.type
    this.numss = this.$route.params.nums
    this.id =  this.$route.params.productAttributeCategoryId
   
    
    this.tiao = this.$route.params.tiao



  //  console.log(this.type);

 this.$axios
      .get("/productAttribute/category/list/withAttr", {
        params: {
  
        },
      })
      .then(function (response) {
        that.ruleForm.options = response.data.data
 
   
      })
      .catch(function (error) {
    
      });



  },

  data() {

    return {
      tiao:"",
      numss:"",
      typeid:"",
  
      id: "",

    value: '',

      ruleForm: {
      options: [],
    
        
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resourc: "",
        desc: "",

        resource: "普通",
        resourcee: "不需要检索",
        resourceee: "是",
        resourceeee: "0",
        resourceeeee: "1",
        resources: "是",
        fenlei:[],
      },

      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],

        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],

        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      
    };

  },




  methods: {



    fn() {
      let that = this
      // console.log(that.tiao);
      // console.log(this.type);
       this.$router.push({
           name:that.tiao,
            params:{

            names:this.value,
            num:this.id,
            type:this.type,
            productAttributeCategoryId:this.id,
           
           
            }  
          })
          

          },






    xuan(value){
     
    // if(this.$route.params.selectType==0){
    //   this.ruleForm.resourceeee=0
    // }
    // else if(this.$route.params.selectType==1){
    //    this.ruleForm.resourceeee=1
    // }else{
    //    this.ruleForm.resourceeee=2
    // }
    },


    lu(value){



      //     if(this.$route.params.inputType==0){
      //   this.ruleForm.resourceeeee=0
      // }else{
      //   this.ruleForm.resourceeeee=1



        
// }

    },
    //创建
            cha(obj){
             this.id=obj
            },

    tijiao() {
      let that = this;
      this.$confirm("是否提交数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
  // console.log(this.ruleForm.resourceeee);
  // console.log(this.ruleForm.resourceeeee);
  // console.log(this.ruleForm.desc );
  // console.log( this.ruleForm.name);
  // console.log(this.id );
  // console.log( this.ruleForm.resourc );
  // console.log( this.type );

          that.$axios.post("/productAttribute/create" , {
            filterType: 0,
            handAddStatus: 0,
            inputList: this.ruleForm.desc,
            inputType:this.ruleForm.resourceeeee,
            name:  this.ruleForm.name,
            productAttributeCategoryId:this.id,
            relatedStatus: 0,
            searchType: 0,
            selectType: this.ruleForm.resourceeee,
            sort: this.ruleForm.resourc,
            type:this.type ,
          });

        that.fn()
          this.$message({
            type: "success",
            message: "提交成功!",
          });
                
               
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.tijiao();
          // alert('submit!');
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.el-form-item__label {
  width: 6.25rem;
}

.productClassify {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.box {
  width: 60%;
  border: 1px solid #ebeef5;
  border-radius: 2px;
}
.box1 {
  padding: 3.125rem;
  width: 90%;
}
</style>